<!--  -->
<template>
  <div>
    富文本编辑器

  

    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            mode="default"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="ruleForm.content"
            :defaultConfig="editorConfig"
            mode="default"
            @onCreated="handleCreated"
          />
        </div>

        <!-- <el-input v-model="ruleForm.content" /> -->
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { FormInstance, FormRules } from "element-plus";

import { useAuthSotre } from "../sotre/authStore";
import http from "../utils/reuqest";
const authStore = useAuthSotre();

interface PlayData {
  title: string;
  type: number;
  content: string;
}

const ruleFormRef = ref();

const ruleForm = ref<PlayData>({
  title: "",
  type: 1,
  content: "aaaaa",
});

const rules = reactive<FormRules<PlayData>>({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内哦那个", trigger: "blur" }],
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// // 内容 HTML
// const valueHtml = ref("99999999999");
type InsertFnType = (url: string, alt: string, href: string) => void;
const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      server: import.meta.env.VITE_BASE_URL + "/upload/add",
      fieldName: "file",
      headers: {
        Authorization: authStore.token,
      },
      customInsert(res: any, insertFn: InsertFnType) {

        console.log(999999,import.meta.env.VITE_IMG_URL+res.data.url);
        
        // TS 语法
        // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插入图片
        let url=import.meta.env.VITE_IMG_URL+res.data.url;
          insertFn(url, "", "");
      },
    },
  },
};

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");

      console.log(ruleForm.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style scoped></style>
